<template>
    <div id="recommend-view" style="padding: 10px; padding-bottom: 80px; background-color: #F6F7F9; height: 100%;">
        <!-- 分类列表 -->
        <h3 style="margin-bottom: 20px; margin-left: 5px">所有分类</h3>
        <category-card :categories="categories" @openCategoryInfoView="openCategoryInfoView"
            @updateCurrentCategory="updateCurrentCategory"></category-card>

        <!-- 商品展示 -->
        <h3 style="margin-top: 20px ;margin-bottom: 10px; margin-left: 5px;">热门推荐</h3>
        <product-card-row :products="products"></product-card-row>

        <category-info-view v-if="showCategoryInfo" @closeCategoryInfoView="closeCategoryInfoView"
            :category="currentCategory"></category-info-view>
    </div>
</template>

<script>
import CategoryCard from '@/components/CategoryCard.vue'
import ProductCardRow from '@/components/ProductCardRow.vue'
import CategoryInfoView from '@/views/template-views/CategoryInfoView.vue';

export default {
    name: "goods-view",
    components: {
        CategoryCard,
        ProductCardRow,
        CategoryInfoView
    },
    data() {
        return {
            showCategoryInfo: false,
            currentCategory: {},
            categories: [
                {
                    id: 1,
                    icon: require('@/assets/icons/category_more.svg'),
                    name: '默认种类名1',
                    images: [
                        'https://img01.yzcdn.cn/vant/apple-1.jpg',
                        'https://img01.yzcdn.cn/vant/apple-2.jpg',
                    ],
                    description: '布偶猫又叫布拉多尔猫、布娃娃猫、玩偶猫，拉丁学名为Ragdoll。虽然布偶猫的体型和体重在整个猫类中都是最大，但它们确是十足的温柔大块头。它们对人类非常友善，即便面对孩子们的打闹也能大度包容，因此布偶猫受到许多家庭的青睐。'
                },
                {
                    id: 2,
                    icon: require('@/assets/icons/category_more.svg'),
                    name: '默认种类名2',
                    images: [
                        'https://img01.yzcdn.cn/vant/apple-1.jpg',
                        'https://img01.yzcdn.cn/vant/apple-2.jpg',
                    ]
                },
                {
                    id: 3,
                    icon: require('@/assets/icons/category_more.svg'),
                    name: '默认种类名3',
                    images: [
                        'https://img01.yzcdn.cn/vant/apple-1.jpg',
                        'https://img01.yzcdn.cn/vant/apple-2.jpg',
                    ]
                },
                {
                    id: 4,
                    icon: require('@/assets/icons/category_more.svg'),
                    name: '默认种类名4',
                    images: [
                        'https://img01.yzcdn.cn/vant/apple-1.jpg',
                        'https://img01.yzcdn.cn/vant/apple-2.jpg',
                    ]
                },
                {
                    id: 5,
                    icon: require('@/assets/icons/category_more.svg'),
                    name: '默认种类名5',
                    images: [
                        'https://img01.yzcdn.cn/vant/apple-1.jpg',
                        'https://img01.yzcdn.cn/vant/apple-2.jpg',
                    ]
                },
                {
                    id: 6,
                    icon: require('@/assets/icons/category_more.svg'),
                    name: '默认种类名6',
                    images: [
                        'https://img01.yzcdn.cn/vant/apple-1.jpg',
                        'https://img01.yzcdn.cn/vant/apple-2.jpg',
                    ]
                },
                {
                    id: 7,
                    icon: require('@/assets/icons/category_more.svg'),
                    name: '默认种类名7',
                    images: [
                        'https://img01.yzcdn.cn/vant/apple-1.jpg',
                        'https://img01.yzcdn.cn/vant/apple-2.jpg',
                    ]
                },
                {
                    id: 8,
                    icon: require('@/assets/icons/category_more.svg'),
                    name: '默认种类名8',
                    images: [
                        'https://img01.yzcdn.cn/vant/apple-1.jpg',
                        'https://img01.yzcdn.cn/vant/apple-2.jpg',
                    ]
                }
            ],
            products: [
                {
                    id: 1,
                    icon: require('@/assets/backgrounds/user.jpg'),
                    name: 'Default Name',
                    description: 'Default description',
                    price: 9999,
                },
                {
                    id: 2,
                    icon: require('@/assets/backgrounds/user.jpg'),
                    name: 'Default Name',
                    description: 'Default description',
                    price: 9999,
                },
                {
                    id: 3,
                    icon: require('@/assets/backgrounds/user.jpg'),
                    name: 'Default Name',
                    description: 'Default description',
                    price: 9999,
                },
                {
                    id: 4,
                    icon: require('@/assets/backgrounds/user.jpg'),
                    name: 'Default Name',
                    description: 'Default description',
                    price: 9999,
                }
            ]
        }
    },
    methods: {
        openCategoryInfoView() {
            this.showCategoryInfo = true;
        },
        closeCategoryInfoView() {
            this.showCategoryInfo = false;
        },
        updateCurrentCategory(category) {
            this.currentCategory = category;
        }
    }
}
</script>

<style scope>
.card {
    border-radius: 15px;
    overflow: hidden;
}
</style>